document.addEventListener('DOMContentLoaded', function() {
    const player = document.getElementById('customVideoPlayer');
    const playButton = document.getElementById('playButton');
    const seekBar = document.getElementById('seekBar');
    const currentTimeSpan = document.getElementById('currentTime');
    const durationSpan = document.getElementById('duration');
    const muteButton = document.getElementById('muteButton');
    const volumeBar = document.getElementById('volumeBar');
    const fullScreenButton = document.getElementById('fullScreenButton');

    // Update the time format
    function updateTimeFormat(time) {
        const minutes = Math.floor(time / 60);
        const seconds = Math.floor(time % 60).toString().padStart(2, '0');
        return `${minutes}:${seconds}`;
    }

    // Play and Pause
    playButton.addEventListener('click', function() {
        if (player.paused) {
            player.play();
            playButton.textContent = 'Pause';
        } else {
            player.pause();
            playButton.textContent = 'Play';
        }
    });

    // Seek Bar
    player.addEventListener('timeupdate', function() {
        seekBar.value = (player.currentTime / player.duration) * 100;
        currentTimeSpan.textContent = updateTimeFormat(player.currentTime);
    });

    player.addEventListener('loadedmetadata', function() {
        durationSpan.textContent = updateTimeFormat(player.duration);
    });

    seekBar.addEventListener('input', function() {
        if (!isNaN(player.duration)) {
            player.currentTime = (seekBar.value / 100) * player.duration;
        }
    });

    // Mute and Unmute
    muteButton.addEventListener('click', function() {
        if (player.muted) {
            player.muted = false;
            muteButton.textContent = 'Mute';
        } else {
            player.muted = true;
            muteButton.textContent = 'Unmute';
        }
    });

    // Volume Control
    volumeBar.addEventListener('input', function() {
        player.volume = volumeBar.value;
    });

    // Fullscreen toggle
    fullScreenButton.addEventListener('click', function() {
        if (player.requestFullscreen) {
            player.requestFullscreen();
        } else if (player.mozRequestFullScreen) { // Firefox
            player.mozRequestFullScreen();
        } else if (player.webkitRequestFullscreen) { // Chrome, Safari and Opera
            player.webkitRequestFullscreen();
        } else if (player.msRequestFullscreen) { // IE/Edge
            player.msRequestFullscreen();
        }
    });

    // Listen for fullscreen change events
    document.addEventListener('fullscreenchange', exitHandler);
    document.addEventListener('webkitfullscreenchange', exitHandler);
    document.addEventListener('mozfullscreenchange', exitHandler);
    document.addEventListener('MSFullscreenChange', exitHandler);

    function exitHandler() {
        if (!document.fullscreenElement && !document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
            // Exit fullscreen mode was triggered
        }
    }
});